<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">运费管理</h3>
                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="运费">

                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                    data-target="#myModal">
                                添加
                            </button>
                            <button type="button" class="btn btn-default btn-delete">删除</button>
                            <button type="button" class="btn btn-primary btn-update" data-toggle="modal"
                                    data-target="#myModalUpdate" id="updateModal">
                                修改
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="checkAll">全选</th>
                        <th>商品id</th>
                        <th>规格</th>
                        <th>颜色</th>
                        <th>市场价</th>
                        <th>销售价格</th>
                        <th>库存</th>
                        <th>库存预警值</th>
                        <th>计量单位</th>
                        <th>商品重量</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">
                    <tr>
                        <td colspan="7">数据正在加载中...</td>
                    </tr>
                    </tbody>
                </table>
            </div>

                <div id="pageId" class="box-footer clearfix" dm="100">

                </div>

            <!-- /.box-body -->
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabelUpdate">运费修改</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="post" id="formIdUpdate">
                            <input type="hidden" id="stockIdUpdate" name="stockIdUpdate">
                            <div class="form-group">
                                <label for="goodsIdUpdate" class="col-sm-2 control-label">商品id</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="goodsIdUpdate" name="goodsIdUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="specificationsUpdate" class="col-sm-2 control-label">规格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="specificationsUpdate" name="specificationsUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="colorUpdate" class="col-sm-2 control-label">颜色</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="colorUpdate" name="colorUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="marketValueUpdate" class="col-sm-2 control-label">市场价</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="marketValueUpdate" name="marketValueUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="priceUpdate" class="col-sm-2 control-label">销售价格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="priceUpdate" name="priceUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="stockUpdate" class="col-sm-2 control-label">库存</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="stockUpdate" name="stockUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="measurementUpdate" class="col-sm-2 control-label">计量单位</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="measurementUpdate" name="measurementUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="weightUpdate" class="col-sm-2 control-label">商品重量</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="weightUpdate" name="weightUpdate" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary commit-form-update">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">运费录入</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="post" id="formId">
                            <div class="form-group">
                                <label for="goodsId" class="col-sm-2 control-label">商品id</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="goodsId" name="goodsId" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="specifications" class="col-sm-2 control-label">规格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="specifications" name="specifications" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="color" class="col-sm-2 control-label">颜色</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="color" name="color" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="marketValue" class="col-sm-2 control-label">市场价</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="marketValue" name="marketValue" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="price" class="col-sm-2 control-label">销售价格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="price" name="price" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="stock" class="col-sm-2 control-label">库存</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="stock" name="stock" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="measurement" class="col-sm-2 control-label">计量单位</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="measurement" name="measurement" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="weight" class="col-sm-2 control-label">商品重量</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="weight" name="weight" style="width: 55%;"
                                           placeholder="请输入">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary commit-form">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">

    function doCommitUpdateForm() {
        //关闭模态框
        $('#myModalUpdate').modal('hide');
        let url = "goodsFreight/doUpdateObjects";
        let params = {
            "stockId":$("input[name='stockIdUpdate']").val(),
            "goodsId":$("input[name='goodsIdUpdate']").val(),
            "specifications":$("input[name='specificationsUpdate']").val(),
            "color":$("input[name='colorUpdate']").val(),
            "marketValue":$("input[name='marketValueUpdate']").val(),
            "price":$("input[name='priceUpdate']").val(),
            "stock":$("input[name='stockUpdate']").val(),
            "measurement":$("input[name='measurementUpdate']").val(),
            "weight":$("input[name='weightUpdate']").val()
        };
        //3.3基于ajax技术发送请求
        $.post(url, params, function (result) {
            if (result.status === 200) {
                alert(result.msg);
                doRefreshAfterDeleteOK();
            } else {
                alert(result.msg);
            }
        })
    }

    function doUpdateModal() {
        let url = "goodsFreight/doFindGoodsFreightById";
        let id = $("tbody input[type='checkbox']:checked").val();
        let params = {"id":id};
        $.get(url, params, function (result) {
            $("input[name='stockIdUpdate']").val(result.data.stockId);
            $("input[name='goodsIdUpdate']").val(result.data.goodsId);
            $("input[name='specificationsUpdate']").val(result.data.specifications);
            $("input[name='colorUpdate']").val(result.data.color);
            $("input[name='marketValueUpdate']").val(result.data.marketValue);
            $("input[name='priceUpdate']").val(result.data.price);
            $("input[name='stockUpdate']").val(result.data.stock);
            $("input[name='measurementUpdate']").val(result.data.measurement);
            $("input[name='weightUpdate']").val(result.data.weight);
        })
    }


    $(function () {
        $("#pageId").load("doPageUI", function () {
            doGetObjects();//异步加载用户行为日志信息
        });
        //$(".input-group-btn .btn-search").on("click",doQueryObjects);
        //$(".input-group-btn .btn-delete").on("click",doDeleteObjects);
        $(".input-group-btn")
            .on("click", ".btn-search", doQueryObjects)
            .on("click", ".btn-delete", doDeleteObjects)
            .on("click", "#updateModal", doUpdateModal)
        $(".modal-content").on("click", ".commit-form", doCommitForm).on("click", ".commit-form-update", doCommitUpdateForm);
        //全选按钮事件注册
        $("#checkAll").change(doChangeTbodyCheckBoxState);
        //tbody中checkbox对象事件注册
        $("#tbodyId").on("change", "input:checkbox", doChangeTheadCheckBoxState);
    });

    function doCommitForm() {
        //关闭模态框
        $('#myModal').modal('hide');
        let url = "goodsFreight/doAddObjects";
        let params = {
            "goodsId": $("input[name='goodsId']").val(),
            "specifications": $("input[name='specifications']").val(),
            "color": $("input[name='color']").val(),
            "marketValue": $("input[name='marketValue']").val(),
            "price": $("input[name='price']").val(),
            "stock": $("input[name='stock']").val(),
            "measurement": $("input[name='measurement']").val(),
            "weight": $("input[name='weight']").val()
        };
        //3.3基于ajax技术发送请求
        $.post(url, params, function (result) {
            if (result.status === 200) {
                alert(result.msg);
                doRefreshAfterDeleteOK();
            } else {
                alert(result.msg);
            }
        })
    }

    //修改thead中checkbox对象状态
    function doChangeTheadCheckBoxState() {
        //1.获取所有tbody中checkbox对象的状态,并进行逻辑与操作
        let flag = true;//初始值不能等于false
        $("#tbodyId input:checkbox")
            .each(function () {
                flag = flag && $(this).prop("checked");
            })
        //2.修改thead中checkbox对象状态
        $("#checkAll").prop("checked", flag);
    }

    //修改tbody中checkbox对象状态
    function doChangeTbodyCheckBoxState() {
        //1.获取thead中checkbox对象状态
        //这里的$(this)指向的对象为thead中的checkbox对象
        const flag = $(this).prop("checked");
        //2.修改tbody中checkbox对象状态
        $("#tbodyId input:checkbox").prop("checked", flag);
    }

    //获取选中checkbox对象中value属性的值并存储到数组
    function doGetCheckedIds() {
        //1.定义数组,用于存储选中的记录id
        const array = [];//new Array();
        //2.获取所有checkbox对象,并进行迭代,获取value属性值,然后存储到数组.
        $("#tbodyId input:checkbox")//获取tbodyId对应的元素中类型为checkbox的input对象
            .each(function () {//迭代所有类型为checkbox的input对象
                if ($(this).prop("checked")) {//获取checkbox对象的checked属性并校验
                    array.push($(this).val());//将选中的记录的value属性值存储到数组
                }
            });
        //3.返回存储了记录id值的数组对象
        return array;
    }

    //执行客户端删除按钮的事件
    function doDeleteObjects() {
        //1.获取页面上选中的checkbox的值(这里设置的是记录id值)
        const idArray = doGetCheckedIds();
        if (idArray.length === 0) {
            alert("请先选择");
            return;
        }
        //2.给出提示信息(您确定删除吗)
        if (!confirm("确认删除吗")) return;
        //3.发送异步请求执行删除业务
        //3.1定义url
        const url = "goodsFreight/doDeleteObjects";
        //3.2定义参数
        const params = {"ids": idArray.toString()};//[1,2,3].toString()=="1,2,3"
        //3.3基于ajax技术发送请求
        $.post(url, params, function (result) {
            if (result.status === 200) {
                alert(result.msg);
                doRefreshAfterDeleteOK();
            } else {
                alert(result.msg);
            }
        })
    }

    //删除以后的刷新操作:要么继续查询当前页数据,要么查询上一页数据(最后一页)
    function doRefreshAfterDeleteOK() {
        //1.获得当前页码值,总页数,全选状态
        const pageId = $("#pageId");
        let pageCurrent = pageId.data("pageCurrent");
        const pageCount = pageId.data("pageCount");
        const allChecked = $("#checkAll").prop("checked");
        //2.基于当前页码值以及全选状态修改当前页码值
        if (pageCurrent === pageCount && allChecked && pageCurrent > 1) {
            pageCurrent--;
            $("#pageId").data("pageCurrent", pageCurrent);
        }
        //3.重新执行查询
        doGetObjects();
    }

    //基于查询按钮事件,执行日志信息的查询操作
    function doQueryObjects() {
        //1.初始化当前页码值
        $("#pageId").data("pageCurrent", 1);
        //2.执行查询操作
        doGetObjects();
    }

    //启动ajax异步操作,查询用户行为日志信息
    function doGetObjects() {
        //设置thead中checkbox对象的初始状态
        $("#checkAll").prop("checked", false);
        //1.定义请求参数
        let pageCurrent = $("#pageId").data("pageCurrent");
        //在js中非0数字,非undefined,非空串默认用在boolean表达式中都认为是true.
        if (!pageCurrent) pageCurrent = 1;//当pageCurrent没有值时给一个默认值
        const params = {"pageCurrent": pageCurrent};//JS对象(JSON格式)
        //获取页面上用户表单数据,可以基于此表单数据进行查询
        const stockName = $("#searchNameId").val();
        if (stockName) params.stockName = stockName;

        //2.定义请求url
        const url = "goodsFreight/doFindPageObject";
        //3.发送异步请求执行查询,并处理结果
        $.getJSON(url, params, doHandleQueryResponseResult);
    }

    //处理查询操作返回的结果
    function doHandleQueryResponseResult(result) {//JsonResult
        if (result.status === 200) {//正常信息
            //1.呈现当前页的用户行为日志记录
            doSetTableBodyRows(result.data.records);
            //2.呈现当前的分页信息(总记录数,总页数,当前页,...)
            doSetPagination(result.data);//reault.data为服务端业务层返回给控制层的pageObject
        } else {//异常信息
            //alert(result.message);//后续可能修改呈现异常信息的方式
            doHandleQueryResponseError(result.msg);
        }
    }

    //处理日志查询时服务端响应的错误信息
    function doHandleQueryResponseError(message) {
        //设置tbody中的内容信息
        $("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
        //重新初始化分页信息
        doSetPagination({"rowCount": 0, "pageCount": 0, "pageCurrent": 1});
    }

    //将用户行为日志记录呈现在table的tbody位置
    function doSetTableBodyRows(records) {
        //1.获取tbody对象,并清空内容
        var tBody = $("#tbodyId");
        tBody.empty();//清空tbody中内容
        //2.在tbody中追加日志记录(基于数组的forEach函数迭代数组,=>为一个箭头运算符,左边为数组中的一个元素,右边为对这个元素的操作)
        records.forEach(item => tBody.append(doCreateRow(item)));
    }

    //基于数据创建当前行对象
    function doCreateRow(item) {
        return `<tr><td><input type='checkbox' name='cBox' value=${item.stockId} ></td>
            <td>${item.goodsId}</td>
            <td>${item.specifications}</td>
            <td>${item.color}</td>
            <td>${item.marketValue}</td>
            <td>${item.price}</td>
            <td>${item.stock}</td>
            <td>${item.alertValue}</td>
            <td>${item.measurement}</td>
            <td>${item.weight}</td>
            <td>${new Date(item.created).toLocaleString()}</td>
            <td>${new Date(item.updated).toLocaleString()}</td></tr>`;
    }

</script>






